<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>黑名单检测示例报告</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.2.0.css" />
    <link rel="stylesheet" type="text/css" href="../../css/dm-common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/default.css" />
    <link rel="stylesheet" type="text/css" href="../../css/report.css" />
</head>

<body>
    <div class="mode-bg-header">
        <header class="aui-bar aui-bar-nav dmc-header">
            <a class="aui-pull-left  aui-btn" href="javascript:history.go(-1)">
                <span class="aui-iconfont aui-icon-left"></span>
            </a>
            <div class="aui-title">黑名单检测示例报告</div>
        </header>
        <div class="can">
            <canvas id="canvas" width="150" height="130"></canvas>
            <div id="can-text" class="can-text">信用危险</div>
        </div>
        <div class="can-desc">
            评分规则：满分为100分，评分越低，则风险越高，40分以下
            为高危人群。
        </div>
    </div>


    <div class="sfxx">
        <div class="sfxx-title aui-border-b">身份信息</div>
        <div class="sfxx-content">
            <table style="width:100%">
                <tr style="width:100%">
                    <td>姓名：张**</td>
                    <td>手机号码：13917458214</td>
                </tr>
                <tr>
                    <td>年龄：28</td>
                    <td>手机号归属地：上海</td>
                </tr>
                <tr>
                    <td> 籍贯：上海</td>
                    <td>手机运营商：中国移动</td>
                </tr>
                <tr>
                    <td colspan="2">
                        身份证号：310921********2546</td>
                </tr>
            </table>
        </div>
    </div>


    <div class="sfxx aui-margin-t-15">
        <div class="sfxx-title aui-border-b">身份信息</div>
        <div class="sfxx-content">
            <div class="sfxx-content-row">借贷APP数量：</div>
            <div class="sfxx-content-row">消费分期APP数量：</div>
            <div class="sfxx-content-row">信贷APP数量占比：</div>
            <div class="sfxx-content-row">消费分期APP数量占比：</div>
            <div class="sfxx-context-desc">
                ※手机内借贷/消费分期APP数量越多，表明该用户手
                头缺少资金或者从事欺诈金融机构的可能性越高，风
                险也越高。
            </div>
        </div>
    </div>

    <div class="sfxx aui-margin-t-15">
        <div class="sfxx-title aui-border-b">身份信息</div>
        <div class="sfxx-content">
            <div class="sfxx-content-row">借贷APP数量：</div>
            <div class="sfxx-content-row">消费分期APP数量：</div>
            <div class="sfxx-content-row">信贷APP数量占比：</div>
            <div class="sfxx-content-row">消费分期APP数量占比：</div>
            <table class="sfxx-context-table">
                <tr style="background: rgba(230, 230, 230, 1);">
                    <th>查询日期</th>
                    <th>机构类型</th>
                    <th>是否本机构查询</th>
                </tr>
                <tr>
                    <td>2019-1-7</td>
                    <td>线上信用卡代还</td>
                    <td>否</td>
                </tr>
                <tr>
                    <td>2019-1-7</td>
                    <td>其他</td>
                    <td>是</td>
                </tr>
            </table>
            <div class="sfxx-context-desc">
                ※手机内借贷/消费分期APP数量越多，表明该用户手
                头缺少资金或者从事欺诈金融机构的可能性越高，风
                险也越高。
            </div>
        </div>
    </div>

    <div class="sfxx aui-margin-t-15">
        <div class="sfxx-title aui-border-b">黑名单信息</div>
        <div class="sfxx-tab">
            <div class="fsxx-tab-active">30天</div>
            <div>60天</div>
            <div>90天</div>
        </div>
        <div class="sfxx-content">
            <div class="sfxx-content-row">直接联系人黑名单数量：</div>
            <div class="sfxx-content-row">引起黑名单的直接联系人数量：</div>
            <div class="sfxx-content-row">引起黑名单的直接联系人占比：</div>
            <div class="sfxx-content-row">引起黑名单的间接联系人数量：</div>
            <div class="sfxx-content-row">引起黑名单的间接联系人占比：</div>
        </div>
    </div>



    <div class="sfxx aui-margin-t-15">
        <div class="sfxx-title aui-border-b">法院失信信息</div>
        <div class="sfxx-content">
            <div class="sfxx-content-row">法院执行人次数：</div>
            <div class="sfxx-content-row">失信未执行次数：</div>
        </div>
    </div>
    <div class="sfxx aui-margin-t-15">
        <div class="sfxx-title aui-border-b">多平台借贷信息</div>
        <div class="sfxx-content">
            <div class="sfxx-content-row">注册机构数量：</div>
            <div class="sfxx-content-row">借贷机构数：</div>
            <div class="sfxx-content-row">借贷次数：</div>
            <div class="sfxx-content-row">近180天贷款机构数：</div>
            <div class="sfxx-content-row">近180天贷款的贷款次数：</div>
            <div class="sfxx-context-desc">
                ※一段时间内借贷次数越多，手头缺少资金或者从事欺
                诈金融机构的可能性越高，风险也越高。
            </div>
        </div>
    </div>

</body>
<script>
    //aui色彩 可能对应不同的评分
    let danger = '#e51c23';
    let success = '#ffffff';
    let warning = '#ffc107';
    draw(60, Math.PI * 0.9, warning);
    document.getElementById("can-text").style.cssText = 'color:' + warning;

    function draw(percent, sR, coverColor) {
        if (percent < 0 || percent > 100) {
            return;
        }
        if (sR < Math.PI / 2 || sR >= 3 / 2 * Math.PI) {
            return;
        }

        var canvas = document.querySelector('#canvas'),
            cxt = canvas.getContext('2d'),
            cWidth = canvas.width,
            cHeight = canvas.height,
            baseColor = '#e1e1e1',
            coverColor = coverColor || '#ffc107',
            PI = Math.PI,
            sR = sR || 1 / 2 * PI;

        var finalRadian = sR + ((PI + (PI - sR) * 2) * percent / 100);
        var step = (PI + (PI - sR) * 2) / 100;
        var text = 0; // 显示的数字

        window.requestAnimationFrame(paint);

        function paint() {
            cxt.clearRect(0, 0, cWidth, cHeight);
            var endRadian = sR + text * step;
            drawCanvas(cWidth / 2, cHeight / 2, 60, sR, sR + (PI + (PI - sR) * 2), baseColor, 2);
            drawCanvas(cWidth / 2, cHeight / 2, 60, sR, endRadian, coverColor, 3);

            var angle = 2 * PI - endRadian;
            xPos = Math.cos(angle) * 60 + cWidth / 2;
            yPos = -Math.sin(angle) * 60 + cHeight / 2;
            drawCanvas(xPos, yPos, 2, 0, 2 * PI, coverColor, 4);
            cxt.fillStyle = coverColor;
            cxt.font = '40px PT Sans';
            var textWidth = cxt.measureText(text).width;
            cxt.fillText(text, cWidth / 2 - textWidth / 2, cHeight / 2 + 10);
            text++;

            if (endRadian.toFixed(2) < finalRadian.toFixed(2)) {
                window.requestAnimationFrame(paint);
            }
        }

        function drawCanvas(x, y, r, sRadian, eRadian, color, lineWidth) {
            cxt.beginPath();
            cxt.lineCap = "round";
            cxt.strokeStyle = color;
            cxt.lineWidth = lineWidth;
            cxt.arc(x, y, r, sRadian, eRadian, false);
            cxt.stroke();
        }
    }
</script>

</html>